<template>
<div>
<!--面包屑导航-->
<el-breadcrumb separator="-">
    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item>商品管理</el-breadcrumb-item>
    <el-breadcrumb-item>商品分类</el-breadcrumb-item>
</el-breadcrumb>
<el-card class="box-card">

  <!--栅格系统布局-->
    <el-row>
    <el-col :span="3">
        <el-button type="primary" @click="dialogVisibleShow">添加分类</el-button>
    </el-col>
    </el-row>

    <!--表格-->
     <el-table
      :data="tableData"
      style="width: 100%" stripe border>
      <el-table-column type="index" label="#">
      </el-table-column>
      <el-table-column
        label="分类名称"
        width="180">
      <template slot-scope="scope">
      <el-tree :data="[scope.row]" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
      </template>
      </el-table-column>
      <el-table-column
        prop="cat_deleted"
        label="是否有效"
        width="180">
      </el-table-column>
      <el-table-column
        prop="cat_level"
        label="排序">
      </el-table-column>
      <el-table-column
        prop="caozuo"
        label="操作">
        <template slot-scope="scope">
        <el-button size="mini" type="primary" icon="el-icon-edit" @click="dialogVisibleShow1(scope.row.id)"></el-button>
        <el-button size="mini" type="danger" icon="el-icon-delete" @click="deleteuser(scope.row.id)" ></el-button>
        <el-tooltip class="item" effect="dark" content="分配角色" placement="top">
        <el-button size="mini" type="warning" icon="el-icon-setting" ></el-button>
        </el-tooltip>
        </template>
      </el-table-column>
    </el-table>

    <!--分页-->
  <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="queryInfo.pagenum"
      :page-sizes="[2, 5, 10]"
      :page-size="queryInfo.pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
    </el-card>
    <el-dialog
    title="添加分类"
    :visible.sync="dialogVisible"
    width="50%"
    :before-close="handleClose">
    <span>
    <el-form label-width="90px">
    <el-form-item label="分类名称" required>
    <el-input v-model="queryInfo.roleName"></el-input>
    </el-form-item>
    <el-form-item label="父级分类" required>
    <el-input v-model="queryInfo.roleDesc"></el-input>
    </el-form-item>
    </el-form>
    </span>
    <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click=addUser>确 定</el-button>
    </span>
    </el-dialog>
    <el-dialog
    title="修改分类"
    :visible.sync="dialogVisible1"
    width="50%"
    :before-close="handleClose">
    <span>
    <el-form label-width="90px">
    <el-form-item label="分类名称" required>
    <el-input v-model="queryInfo.roleName"></el-input>
    </el-form-item>
    </el-form>
    </span>
    <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible1 = false">取 消</el-button>
        <el-button type="primary" @click=addUser>确 定</el-button>
    </span>
    </el-dialog>
</div>
</template>

<script>
export default{
    data(){
        return{
          queryInfo:{
            query:'',
            pagenum:1,
            pagesize:2
          },
          tableData:[],
          total:'',
          defaultProps:{
            children:'children',
            label:'cat_name',
          },
          dialogVisible:false,
          dialogVisible1:false,
        }
    },
    methods:{
      getCategories(){
        this.$http.get('categories',{params:this.queryInfo}).then(
          data=>{
            console.log(data.data.data)
            this.tableData = data.data.data.result
            this.total = data.data.data.total
          }
        )
      },
    handleNodeClick(data){
      console.log(data)
    },
    dialogVisibleShow(){
      this.dialogVisible = true
    },
    dialogVisibleShow1(){
      this.dialogVisible1 = true
    },
    deleteuser(id){
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$http.delete('users/'+id).then(data=>{
            if(data.data.meta.status!==200){
              this.$message.error('删除失败')
            }else{
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
         }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      },
    },
    created(){
      this.getCategories()
    }
}
</script>